<!-- 材料出库：蹇泽阳 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 100%">
        <div class="flex">
          <h1 class="f16">仓库定义</h1>
          <JDialog :tableHeader="JTableHeader" :width="73" :currentTableRow="currentTableRow" @confirm="confirm" :unEdit="false" :unSub="true" />
        </div>
        <Table
          :tableHeader="tableHeader"
          @selectList="selectTableList"
          :tableData="tableData"
          selection
          class="mt10"
          :isLoading="isLoading"
          @currentRow="currentRow"
        />
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script lang="ts" setup name="MaterialIssue">
import JMessage from '@/utils/JMessage'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { watch } from 'vue'
import { onMounted } from 'vue'
import { ref } from 'vue'

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectP: '请选择订单状态',
    selectValue: '',
    selectLabel: '',
    selectOptions: [
      {
        optionLabel: '已作废',
        optionValue: '-1',
        optionKey: '-1'
      },
      {
        optionLabel: '待出库',
        optionValue: '0',
        optionKey: '0'
      },
      {
        optionLabel: '已出库',
        optionValue: '1',
        optionKey: '1'
      }
    ]
  },
  {
    type: 'select',
    selectP: '请选择订单类型',
    selectValue: '',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入物料名称',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '出库批处理'
  },
  {
    type: 'button',
    checkboxLabel: '当前行出库单作废'
  }
])
// 表一模块
// 表一按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '出库批处理') {
    // 出库批处理
    if (selectedLists.value.length === 0) {
      JMessage.warning('请选择需要出库的材料')
    }
    const res = await service.post<any, any>(`/store/mtl/shipment?idList=${selectedLists.value.map((item: any) => item.detailId)}`)
    if (res.code === 200) {
      JMessage.success('出库批处理成功')
      getTableList()
    } else {
      JMessage.error(res.msg)
    }
  }
  if (content === '当前行出库单作废') {
    // 当前行出库单作废
    if (selectedLists.value.length === 0) {
      JMessage.warning('请选择需要作废的出库单')
    }
    const res = await service.post<any, any>(`/store/mtl/shipment/abandon?flag=${1}&id=${currentTableRow.value.detailId}`)
    if (res.code === 200) {
      JMessage.success('出库单作废成功')
      getTableList()
    } else {
      JMessage.error(res.msg)
    }
  }
}
const tableData = ref([])
const imgList = ref([])
const isLoading = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}

const tableHeader = ref([
  {
    label: '仓库名称',
    prop: 'warehouseName'
  },
  {
    label: '仓库类型',
    prop: 'warehouseType'
  },
  {
    label: '仓库定位',
    prop: 'address'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/store/mtl/shipment/list', {
    lotNo: formList.value.find((item: any) => item.inputPlaceholder === '请输入指令')?.inputValue,
    addr: formList.value.find((item: any) => item.selectPlaceholder === '请选择仓库名称')?.selectValue,
    orderStatus: formList.value.find((item: any) => item.selectPlaceholder === '请选择订单状态')?.selectValue,
    orderType: formList.value.find((item: any) => item.selectPlaceholder === '请选择订单类型')?.selectValue,
    mtlName: formList.value.find((item: any) => item.inputPlaceholder === '请输入物料名称')?.inputValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })
  isLoading.value = false
  tableData.value = tableDataList.data.records
  total.value = tableDataList.data.total
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0]) => {
  currentTableRow.value = row
}
const selectedLists = ref([]) as any
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList
}
const JTableHeader = ref([
  {
    label: '指令号',
    prop: 'lotNo'
  },
  {
    label: '厂商',
    prop: 'vendorName'
  },
  {
    label: '送货单号',
    prop: 'sendNo'
  },
  {
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    label: '物料名称',
    prop: 'mtlName'
  },
  {
    label: '物料单位',
    prop: 'mtlUnit'
  },
  {
    label: '物料颜色',
    prop: 'mtlColor'
  },
  {
    label: '订单数量',
    prop: 'orderQty'
  },
  {
    label: '仓库名称',
    prop: 'warehouseName'
  },
  {
    label: '出库单号',
    prop: 'storeOrderNo'
  },
  {
    label: '实际数量',
    prop: 'acceptQty'
  },
  {
    label: '出库类型',
    prop: 'orderType'
  },
  {
    type: 'selectJV2',
    label: '出库状态',
    prop: 'orderStatus',
    options: [
      {
        label: '已作废',
        value: '-1'
      },
      {
        label: '待出库',
        value: '0'
      },
      {
        label: '已出库',
        value: '1'
      }
    ]
  },
  {
    type: 'selectJV2',
    label: '仓库',
    prop: 'stkId',
    options: []
  },
  {
    label: '备注',
    prop: 'remark'
  }
]) as any
// Dialog确认添加/修改按钮
const confirm = async (obj: any, dialogVisible: any, title: any) => {
  // 向服务器发送请求，更新外派单信息
  if (title === '添加') {
    const res = (await service.put(`/store/mtl/shipment/add`, {
      ...obj
    })) as any
    // 判断请求是否成功
    if (res.code === 200) {
      JMessage.success(res.msg)
    } else {
      JMessage.error(res.msg)
    }
  } else if (title === '修改') {
    const res = (await service.put(`/store/mtl/shipment/edit`, {
      ...obj
    })) as any
    // 判断请求是否成功
    if (res.code === 200) {
      JMessage.success(res.msg)
    } else {
      JMessage.error(res.msg)
    }
  }
  // 关闭弹出框
  dialogVisible.value = false
  // 重新获取表格数据
  getTableList()
}

// 获取下拉框数据
const getSelectOptions = async () => {
  // 获取仓库下拉框
  const res = (await service.get(`/store/warehouse/back`)) as any
  JTableHeader.value.find((item: any) => item.prop === 'stkId').options = res.data.map((item: any) => ({
    value: item.stkId,
    label: item.warehouseName
  }))
}
onMounted(() => {
  getSelectOptions()
})
</script>
